/**
 *Day 5
 * find my location
 */

import React,{Component}from 'react';
import {Image,TouchableHighlight,View,Text} from 'react-native';
import  Icon from 'react-native-vector-icons/Ionicons';
import MapView from 'react-native-maps';
import  styles from './styles';

export  class  Map extends Component{
    static defaultProps ={
        mapType:'standard',
        showsUserLocation:false,
        followUserLocation:false,
    }

    static propTypes = {
        mapType:React.PropTypes.oneOf(['standard','statellite','hybrid']),
        showsUserLocation:React.PropTypes.bool.isRequired,
        followUserLocation:React.PropTypes.bool.isRequired,
    }

    constructor(){
        super();
        this.state={
            isFirstLoad:true,
            mapRegion:undefined,
            annotations:[],
        }
    }

    _getAnnotatoons(region){
        return [{
            longitude:region.longitude,
            latitude:region.latitude,
            title:'You Are Here',
        }];
    }

    _onRegionChangeComplete(region){
        if(this.state.isFirstLoad){
            this.setState({
                annotations:this._getAnnotatoons(region),
                isFirstLoad:false
            });
        }
    }

    _onRegionChangeComplete(region){
        if (this.state.isFirstLoad){
            this.setState({
                annotations:this._getAnnotatoons(region),
                isFirstLoad:false
            })
        }
    }

    render(){
        return (<View>
            <MapView style ={this.props.mapStyle} mapType ={this.props.mapType} showUserLocation = {this.props.showsUserLocation}
                followUserLocation ={this.props.followUserLocation} onRegionChangeComplete = {(region)=>this._onRegionChangeComplete(region)}
                     region = {this.state.mapRegion} annotations ={this.state.annotations}
            />
        </View>)
    }

}


export default class  extends Component{
    constructor(){
        super();
        this.state={
            showGeo:false
        };
    }
    _getLocation(){
        this.setSate({
            showGeo:true
        });
    }
    
    render(){
        return(<View style={styles.container}>
            <Map mapType="standard" mapStyle={styles.map} showUserLocation={this.state.showGeo} followUserLocation={this.state.showGeo}></Map>
        <TouchableHighlight underColor="'#00bd03" style={styles.btn} onPress={()=>this._getLocation()}>
            <Text style={styles.btnText}><Icon size={18} name="ios-navigate"></Icon>Find my location</Text>
        </TouchableHighlight>
        </View>)
    }
    
    
}